<template>
	<view class="personnelManagement">
		<!-- <f-navbar title="人员管理（维保）" :iconLeft="true" :isBack="true" @goBack="goBack" /> -->
		<!-- tabs类型切换 -->
		<view class="personnelManagement-tabs">
			<u-tabs name="cate_name" height="90" active-color="#ffffff" bg-color="#3178FF" count="cate_count"
				:bar-style="barStyle" inactive-color="#ffffff" :is-scroll="false" :list="tabsList"
				:current="tabsCurrent" @change="changeType"></u-tabs>
		</view>

		<view class="ff-padding-bottom-40">
			<view class="personnelManagement-content" v-if="staffList.length > 0">
				<view v-for="(item, index) of staffList" :key="index"
					class="personnelManagement-content-box ff-border-radius-10 ff-margin-bottom-10 ff-bg-fff">
					<view class="ff-flex-between ff-align-items-one">
						<view class="ff-align-items">
							<view>
								<image v-if="item.staffType == 5" class="personnelManagement-content-box-headerImg"
									src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/unit-staff.png"
									mode=""></image>
								<image v-if="item.staffType == 1" class="personnelManagement-content-box-headerImg"
									src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/unit-admin.png"
									mode=""></image>
							</view>
							<view class="personnelManagement-content-box-info ff-margin-left-12">
								<view class="ff-font-16 ff-font-weight-600 ff-margin-bottom-12">{{ item.username }}
								</view>
								<view class="ff-font-14">
									<image
										src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/staff-phone.png"
										mode=""></image>
									<text @click="staffPhoneClick" class="ff-color-blue">{{ item.staffPhone }}</text>
								</view>
							</view>
						</view>
						<view class="personnelManagement-content-box-but">
							<view class="ff-align-items" v-if="item.status == 0">
								<view @click="refuseClick(item, 5)" class="but1 ff-font-13 ff-margin-right-15">拒绝</view>
								<view @click="refuseClick(item, 1)"
									class="but2 ff-font-13 ff-color-fff ff-border-radius-5">通过</view>
							</view>
							<view v-if="item.status == 1 && item.staffType != 1" @click="removeClick(item, 1)"
								class="but3 ff-font-13">移除</view>
						</view>
					</view>
				</view>
				<u-divider v-if="noData" border-color="#909399" height="120" margin-bottom="30" color="#909399"
					bg-color="#f5f5f5">没有更多了</u-divider>
			</view>
			<f-noData v-else></f-noData>
		</view>
		<view class="personnelManagement-but"><u-button type="primary" @click="addStaffGo">添加新员工</u-button></view>
		<u-back-top :scrollTop="scrollTop" top="200" mode="circle" :iconStyle="iconStyle"
			:customStyle="customstyle"></u-back-top>
		<!-- -----------------------------弹框区------------------------------ -->
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<u-modal v-model="locationRemove" @confirm="removeConfirm" title="温馨提示" show-cancel-button="true"
			:content-style="{ 'line-height': '1.5' }" content="您确定要删除该员工吗？" />
	</view>
</template>

<script>
	export default {
		name: 'personnelManagement',
		data() {
			return {
				locationRemove: false, // 删除弹框的显/隐
				scrollTop: 0,
				iconStyle: {
					fontSize: '32rpx',
					color: '#FFFFFF'
				},
				customstyle: {
					background: '#3B83FE'
				},
				// tabs类型切换
				barStyle: {
					background: '#ffffff'
				},
				tabsList: [{
						cate_name: '全部'
					},
					{
						cate_name: '待审核',
						count: ''
					}
				],
				tabsCurrent: 0, // tabs的index
				// 员工列表数据
				staffList: [],
				params: {
					current: 1,
					size: 8,
					status: '' // 状态(0:未审核 1:已审核 5:已禁用)
				},
				noData: false, // 暂时没有更多数据state
				removeId: '' // 删除某一个人员的id
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.getNotApprovedStaffNum(); // 获取未审核人员的数量
			this.getStaffList(); // 获取员工列表数据
		},
		onShow() {
			this.getNotApprovedStaffNum(); // 获取未审核人员的数量
			this.getStaffList(); // 获取员工列表数据
		},
		// 上拉加载
		onReachBottom() {
			this.params.current++;
			this.getStaffList(); // 获取的数据列表
		},
		// 下拉刷新
		onPullDownRefresh() {
			let that = this;
			that.params.current = 1;
			that.getNotApprovedStaffNum(); // 获取未审核人员的数量
			that.getStaffList(); // 获取员工列表数据
			setTimeout(() => {
				that.$refs.uToast.show({
					title: '刷新成功',
					type: 'success'
				});
				uni.stopPullDownRefresh(); // 停止刷新
			}, 100);
		},
		computed: {
			tabberStyle() {
				return `top:${this.customBar}px;`;
			}
		},
		methods: {
			// 返回首页
			goBack() {
				this.$pageJump.reLaunch('/pages/maintenance/company/Company');
			},
			// 拨打电话
			staffPhoneClick(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			// tabs切换
			changeType(index) {
				this.tabsCurrent = index;
				if (index == 0) {
					this.staffList = [];
					this.params.current = 1;
					this.params.status = '';
					this.getStaffList(); // 获取员工列表数据
					return;
				}
				if (index == 1) {
					this.staffList = [];
					this.params.current = 1;
					this.params.status = 0;
					this.getStaffList(); // 获取员工列表数据
					return;
				}
			},
			// 获取未审核人员的数量
			async getNotApprovedStaffNum() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.get({
					url: '/company/staff/getValidNum'
				});
				// console.log('获取未审核人员的数量-------', data);
				if (data.code == 200) {
					this.tabsList[1].count = data.data;
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 获取员工列表数据
			async getStaffList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: '/company/staff/page',
					data: this.params
				});
				// console.log('获取员工列表数据-------', data);
				if (data.code == 200) {
					const infoList = data.data.records;
					if (infoList.length == 0 && this.params.current == 1) {
						// console.log('首次加载没数据');
						this.noData = false;
						this.staffList = [];
					} else if (infoList.length < 6 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = true;
						this.staffList = infoList;
					} else if (infoList.length !== 0 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = false;
						this.staffList = infoList;
					} else if (infoList.length !== 0 && this.params.current > 1) {
						// console.log('上拉加载更多数据');
						this.noData = false;
						this.staffList = this.staffList.concat(infoList);
					} else if (infoList.length == 0 && this.params.current > 1) {
						// console.log('上拉加载没有更多数据了');
						this.noData = true;
					}
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 操作员工（通过 拒绝）
			refuseClick(item, status) {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				let params = {
					id: item.id,
					status: status
				};
				this.$http
					.post({
						url: '/company/staff/valid',
						data: params
					})
					.then(res => {
						// console.log('操作员工（通过 拒绝）--------', res);
						if (res.code == 200) {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success'
							});
							this.getNotApprovedStaffNum(); // 获取未审核人员的数量
							this.params.current = 1;
							this.getStaffList(); // 获取的数据列表
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
						this.$refs.loading.closeLoading(); // 关闭loading动画
					});
			},
			// 操作员工（移除）
			removeClick(item) {
				this.locationRemove = true;
				this.removeId = item.id;
			},
			removeConfirm() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				this.$http.post({
					url: `/company/staff/del/${this.removeId}`
				}).then(res => {
					// console.log('操作员工移除--------', res);
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '删除成功',
							type: 'success'
						});
						this.params.current = 1;
						this.getStaffList(); // 获取的数据列表
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						});
					}
					this.$refs.loading.closeLoading(); // 关闭loading动画
				});
			},
			// 跳转新增员工的页面
			addStaffGo() {
				this.$pageJump.navigateTo(
					'/pages/maintenance/company/home/components/personnelManagement/components/personnelManagementAdd');
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	.personnelManagement {
		/deep/.u-badge--bg--error {
			right: 30% !important;
		}

		&-tabs {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			width: 100%;
		}

		&-content {
			margin: 115rpx 24rpx 20rpx;

			&-box {
				padding: 30rpx;

				&-headerImg {
					width: 96rpx;
					height: 96rpx;
				}

				&-info {
					.ff-font-16 {
						color: #0b0e11;
					}

					.ff-font-14 {
						color: #5c5f65;
					}

					image {
						width: 25rpx;
						height: 25rpx;
						margin: 0 3rpx -3rpx 0;
					}
				}

				&-but {
					.but1 {
						color: #ef312e;
					}

					.but2 {
						background-color: #3178ff;
						padding: 16rpx 30rpx;
					}

					.but3 {
						color: #3178ff;
					}
				}
			}
		}

		&-but {
			padding-bottom: env(safe-area-inset-bottom); // 针对iphone xr等系列的刘海底部屏幕做的适配
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #ffffff;

			/deep/.u-size-default {
				height: 100rpx !important;
				line-height: 100rpx !important;
			}
		}
	}
</style>